//2.懒加载
import { lazyload } from './jquery.lazyload.js'
import { $ } from './jquery.js'
class lunbo {//类
    constructor() {//构造函数
        this.imgbox = $('.banner_imglist')
        this.imgList = $('.banner_imglist img')
        this.btnList = $('.banner_btnlist li')
        this.btnL = $('.btnleft')
        this.btnR = $('.btnright')
        this.listWidth = null
        this.index = null
        this.t = null
        this.banner_container = $('.banner_container')
    }
    init() {//原型方法
        let _this = this
        _this.listWidth = _this.imgList.eq(0).width()
        this.imgbox.css('width', this.imgList.length * this.listWidth)
        //根据listbtn按钮进行移动当前ulbox的left值
        this.btnList.on('click', function () {
            //获取当前图片单个的宽度尺寸
            _this.index = $(this).index()
            _this.btnList.eq($(this).index()).addClass('active').siblings().removeClass('active')
            //调用方法
            _this.change()
        })
        //点击右键
        this.btnR.on('click', () => {
            // clearInterval(_this.t)
            this.index++
            this.change()
            if (this.index === this.btnList.length) {
                this.btnList.eq(0).addClass('active').siblings().removeClass('active')
            } else {
                this.btnList.eq(this.index).addClass('active').siblings().removeClass('active')
            }
        })
        this.btnL.on('click', () => {
            // clearInterval(_this.t)
            this.index--
            this.change()
            this.btnList.eq(this.index).addClass('active').siblings().removeClass('active')
        })
        this.t = setInterval(() => {
            this.btnR.click()
        }, 3000);

        this.banner_container.hover(function () {
            clearInterval(_this.t)
        }, function () {
            _this.t = setInterval(() => {
                _this.btnR.click()
            }, 3000);
        })
    }
    change() {
        if (this.index < 0) {
            this.imgbox.css('left', - this.listWidth * this.btnList.length)
            this.index = this.btnList.length - 1
        }
        //判断如果图片大于等于了最大长度让其回到起点，并且让其的index=1，因为当前的尾部图片已经是第一张了，需要做的是划到第二张
        if (this.index === this.btnList.length + 1) {
            this.imgbox.css('left', 0)
            this.index = 1
        }

        this.imgbox.stop(true).animate({
            left: - this.index * this.listWidth
        })

    }
}
let indexListData = [
    {
        title: '智能手机',
        minbanner: 'https://image.samsungeshop.com.cn/act/2022/04/27/62696844e4b04c32de5ed4a3.png'
    },
    {
        title: '平板/存储',
        minbanner: 'https://image.samsungeshop.com.cn/act/2022/05/13/627d347ee4b04c32f3e4a52e.png'
    },
    {
        title: '可穿戴设备',
        minbanner: 'https://image.samsungeshop.com.cn/act/2022/04/28/62696897e4b04c32de5ed4a5.png'
    },
    {
        title: '智能产品配件',
        minbanner: 'https://image.samsungeshop.com.cn/act/2022/04/13/62567c63e4b04c32f3e48eda.png'
    },
    {
        title: '电视/影音/显示器',
        minbanner: 'https://image.samsungeshop.com.cn/act/2022/05/06/6274cfd4e4b04c32de5ed7f2.png'
    }
]

class indexList {
    constructor() {
        this.data_list = $('.datalist_list_R')
        this.listData = indexListData
        //楼梯属性储存
        this.lotiindex = null
        this.loticonstTop = null
    }
    init() {
        let _this = this
        $.ajax({
            url: 'http://127.0.0.1/SAMSUNGproject/backend/index_list_data.php',
            method: 'get',
            dataType: 'json',

        }).then((result) => {
            // console.log(result);
            // console.log(this.listData);
            let str = ''
            //渲染数据
            $.each(indexListData, (inde, element) => {

                str += ` <div class="datalist_content">
                <div class="datalist_t">
                    <span>${element.title}</span>
                    <a href="#"><span>查看更多</span><span class="iconfont icon-113fangxiang_xiangyou"></span></a>
                </div>


                <div class="datalist_list">
                    <div class="datalist_list_L">
                        <a href="http://127.0.0.1/SAMSUNGproject/frontend/list.html">
                            <img class="lazyload" data-original="${element.minbanner}"
                                alt="">
                        </a>
                    </div>
                    <div class="datalist_list_R">
                        <div class="datalist_list_content">
                        </div>
                    </div>
                </div>
            </div>`

                //渲染数据
                $('.datalist_one').html(str)
                let listBox = ''
                $.each(result, function (index, element) {
                    listBox += `
                
                <div class="atalist_list_content_item" id="">
                    <a href="http://127.0.0.1/SAMSUNGproject/frontend/list.html">
                        <div>
                            <div class="datalist_item_img">
                                <img class="lazyload" data-original="${element.url}" alt="">
                            </div>
                         
                            <div class="datalist_item_t1">${element.title}</div>
                            <div class="datalist_item_t2">享多重购机礼遇</div>
                            <div class="datalist_item_jg"><span>￥${element.price}</span></div>
                        </div>
                    </a>
                </div>
                `
                    $('.datalist_list_content').html(listBox)
                    if (index === 7) {
                        return false
                    }

                })
                //懒加载过程
                $('img.lazyload').lazyload({
                    effect: 'fadeIn' //fadeIn  slideDown
                });
            })
            this.louti()
        })
    }
    louti() {
        let _this = this
        //控制滚动条的距离值
        function scrollTOO() {
            let winTop = $(window).scrollTop()
            let contentloti = $('.datalist_content')
            $.each(contentloti, (i, element) => {
                // console.log(index);
                // console.log($(element).offset().top);
                if ($(element).offset().top >= winTop) {
                    // console.log($('.section_content li')[index]);
                    // $('.section_content li')[index].addClass('active').siblings().removeClass('active')
                    $($('.section_content li')[i]).addClass('active').siblings().removeClass('active');
                    return false
                }
            })
        }
        scrollTOO()
        $(window).on('scroll', function () {
            scrollTOO()
        })
        //点击当前楼梯对应li添加样式以及移动到属于自己content的区域
        $('.section_content li').on('click', function () {
            $(window).off('scroll')

            $(this).addClass('active').siblings().removeClass('active')
            //获取当前所点击的索引位置，根据索引位置找到当前对应的元素相对于文档顶部的top值，让html的scrollTop = 获取到当前元素位置离顶部的top值
            // console.log(_this);
            _this.lotiindex = $(this).index()
            // console.log($(this).index());
            // console.log(index);
            //因为页面内容跟索引不对应，判断让其等于那个位置
            if (_this.lotiindex >= 5) {
                _this.lotiindex = 4
            }
            _this.loticonstTop = $($('.datalist_content')[_this.lotiindex]).offset().top

            $('html').stop(true).animate({
                scrollTop: _this.loticonstTop
            }, function () {
                $(window).on('scroll', function () {
                    scrollTOO()
                })
            })

        })
    }
}
class Scroll {
    constructor() {
    }
    init() {
        this.backTop()
    }
    //回到顶部
    backTop() {
        //获取window滚动条的
        $(window).on('scroll', function () {
            let scrollTop = $(this).scrollTop()
            // console.log(scrollTop);
            //判断是否大于等于一定的值让回到顶部show
            if (scrollTop >= 500) {
                //控制返回顶部的按钮出现：消失
                $('.dingbu').show()
                // console.log($('.dingbu'));
            } else {
                $('.dingbu').hide()
            }
            $('.dingbu').on('click', function () {
                //控制回到顶部的动作
                $('html').stop(true).animate({
                    scrollTop: 0
                })
            })
        })
    }
}
export {
    lunbo,
    indexList
}